<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="onSubmit" label-width="120px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.schoolTerm')">
                        <CalendarSelect v-model="queryForm.calendarId" @load-done="done"></CalendarSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('tutorAuth.currentGrade')">
                        <el-date-picker
                            v-model="queryForm.currentGrade"
                            value-format="yyyy"
                            type="year"
                            :placeholder="$t('common.text.all')"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingLevel')">
                        <el-select
                            multiple
                            collapse-tags
                            v-model="queryForm.trainingLevels"
                            style="width: 100%;"
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.trainingLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingCategory')">
                        <el-select
                            collapse-tags
                            multiple
                            v-model="queryForm.trainingCategorys"
                            style="width: 100%;"
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.trainingCategory"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.enrolSeason')">
                        <el-select
                            v-model="queryForm.enrolSeason"
                            style="width: 100%;"
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.enrolSeason"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">{{$t("stuRegister.registerRoleManage")}}</div>
            <el-row>
                <el-col :span="24">
                    <div class="float-right">
                        <el-button
                            type="primary"
                            v-if="showAdd"
                            @click="addRow"
                        >{{$t('message.add')}}</el-button>
                    </div>
                </el-col>
            </el-row>
            <edu-table
                :data="roles"
                size="mini"
                style="width:100%;margin-top:18px"
                :order="false"
                :selection="false"
                @page-change="handleCurrentChange"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :current-page="queryForm.pageNum_"
            >
                <el-table-column
                    :label="$t('label.schoolTerm')"
                    width="180px"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">{{ scope.row.calendarName }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('tutorAuth.currentGrade')"
                    prop="currentGrade"
                    width="120px"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.trainingLevel')"
                    prop="trainingLevel"
                    width="120px"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.trainingCategory')"
                    prop="trainingCategoryI18n"
                    width="120px"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.enrolSeason')"
                    prop="enrolSeasonI18n"
                    width="120px"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.beginTime')"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">{{ getDateFormat(scope.row.startTime) }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('label.endTime')"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">{{ getDateFormat(scope.row.endTime) }}</template>
                </el-table-column>
                <el-table-column label="教务员注册开始时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ getDateFormat(scope.row.jwyStartTime) }}</template>
                </el-table-column>
                <el-table-column label="教务员注册结束时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ getDateFormat(scope.row.jwyEndTime) }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.operation')" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            v-if="showEdit"
                            type="text"
                            @click="editRow(scope.row.id)"
                        >{{$t('message.edit')}}</el-button>
                        <el-button
                            v-if="showDelete"
                            type="text"
                            @click="deleteRow(scope.row.id)"
                        >{{$t('message.delete')}}</el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
        <edu-dialog
            :title="$t('stuRegister.registerRoleMaintain')"
            width="70%"
            ref="registerRoleDialog"
            :autoHeight="true"
            @close="handleClose"
        >
            <el-form
                label-width="160px"
                label-suffix="："
                :model="postForm"
                :rules="rules"
                ref="ruleForm"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('label.schoolTerm')" prop="calendarId">
                            <CalendarSelect v-model="postForm.calendarId"></CalendarSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('tutorAuth.currentGrade')">
                            <el-date-picker
                                v-model="postForm.currentGrade"
                                value-format="yyyy"
                                type="year"
                                :placeholder="$t('common.text.all')"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingLevel')" prop="trainingLevels">
                            <el-select
                                multiple
                                collapse-tags
                                v-model="postForm.trainingLevels"
                                style="width: 100%;"
                                clearable
                                :placeholder="$t('common.text.all')"
                            >
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingCategory')">
                            <el-select
                                v-model="postForm.trainingCategory"
                                style="width: 100%;"
                                clearable
                                :placeholder="$t('common.text.all')"
                            >
                                <el-option
                                    v-for="item in options.trainingCategory"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('label.beginTime')" prop="startTime">
                            <el-date-picker
                                v-model="postForm.startTime"
                                value-format="timestamp"
                                type="datetime"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.endTime')">
                            <el-date-picker
                                v-model="postForm.endTime"
                                value-format="timestamp"
                                type="datetime"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="教务员注册开始时间" prop="jwyStartTime">
                            <el-date-picker
                                v-model="postForm.jwyStartTime"
                                value-format="timestamp"
                                type="datetime"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="教务员注册结束时间">
                            <el-date-picker
                                v-model="postForm.jwyEndTime"
                                value-format="timestamp"
                                type="datetime"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('label.enrolSeason')">
                            <el-select v-model="postForm.enrolSeason" style="width:100%" clearable>
                                <el-option
                                    v-for="item in options.enrolSeason"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template slot="buttons">
                <el-button @click="returnDialog">{{$t('message.return')}}</el-button>
                <el-button type="primary" @click="saveDialog">{{$t('message.submit')}}</el-button>
            </template>
        </edu-dialog>
        <edu-dialog title="提示" width="500px" ref="tipDialog" id="tip-dialog">
            <div>
                <i class="el-icon-info"></i>
                <span>返回将不会保存当前注册权限设置，是否确定?</span>
            </div>
            <template slot="buttons">
                <el-button @click="cancelTipDialog">{{$t('message.cancel')}}</el-button>
                <el-button @click="saveTipDialog">保存并关闭</el-button>
                <el-button @click="confirmTipDialog" type="primary">{{$t('message.confirm')}}</el-button>
            </template>
        </edu-dialog>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import {
    registConfigList,
    addRegistConfig,
    getRegistConfig,
    updateRegistConfig,
    deleteRegistConfig
} from "common/src/api/studentRegister";
import moment from "moment";
export default {
    name: "RegisterRoleManage",
    data() {
        return {
            queryForm: {
                calendarId: null,
                currentGrade: null,
                trainingLevels: [],
                trainingCategorys: [],
                enrolSeason: null,
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            postForm: {
                calendarId: null,
                currentGrade: null,
                trainingLevels: [],
                trainingCategory: null,
                enrolSeason: null,
                startTime: null,
                endTime: null,
                projId: null,
                jwyStartTime: null,
                jwyEndTime: null
            },
            options: {
                trainingLevel: [],
                trainingCategory: [],
                enrolSeason: []
            },
            roles: [],
            editId: null,
            currentCalendarId: null,
            rules: {
                calendarId: [
                    {
                        required: true,
                        message: this.$t("stuRegister.selectCalendar"),
                        trigger: "blur"
                    }
                ],
                startTime: [
                    {
                        required: true,
                        message: this.$t("stuRegister.selectStartDate"),
                        trigger: "blur"
                    }
                ],
                jwyStartTime: [
                    {
                        required: true,
                        message: "请选择教务员注册开始时间",
                        trigger: "blur"
                    }
                ],
                trainingLevels: [
                    {
                        required: true,
                        message: "请选择培养层次",
                        trigger: "blur"
                    }
                ]
            },
            showAdd: false,
            showEdit: false,
            showDelete: false
        };
    },
    mounted() {
        this.init();
        this.setProjId();

        let session = localStorage.getItem("sessiondata");
        session = JSON.parse(session);
        let user = session.mockUser || session.user;
        if (user.uid == "admin1") {
            this.showAdd = true;
            this.showEdit = true;
            this.showDelete = true;
            return;
        }
        if (user.innerRoles.includes("1")) {
            this.showAdd = true;
            this.showEdit = true;
            this.showDelete = true;
        }
    },
    methods: {
        setProjId() {
            let user =
                this.$store.state.session.user ||
                JSON.parse(localStorage.getItem("user"));
            if (user) {
                this.postForm.projId = user.currentManageDptId;
            }
        },
        init() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_PYLB", "X_RXJJ"]
            };
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            trainingLevel: "X_PYCC",
                            trainingCategory: "X_PYLB",
                            enrolSeason: "X_RXJJ"
                        },
                        res.data,
                        this.options
                    );
                }
            });
        },
        reset() {
            this.queryForm.calendarId = this.currentCalendarId;
            this.queryForm.currentGrade = null;
            this.queryForm.trainingLevels = [];
            this.queryForm.trainingCategorys = [];
            this.queryForm.enrolSeason = null;
            this.onSubmit();
        },
        onSubmit() {
            registConfigList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.roles = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.onSubmit();
        },
        addRow() {
            this.editId = null;
            this.$refs.registerRoleDialog.open();
            if (this.$refs.ruleForm) {
                this.$refs.ruleForm.clearValidate();
            }
        },
        editRow(id) {
            this.editId = id;
            getRegistConfig(id).then(res => {
                if (res.code == 200) {
                    this.$refs.registerRoleDialog.open();
                    this.postForm.calendarId = res.data.calendarId;
                    this.postForm.currentGrade = res.data.currentGrade
                        ? res.data.currentGrade.toString()
                        : null;
                    this.postForm.trainingLevels = res.data.trainingLevel
                        ? res.data.trainingLevel.split(",")
                        : [];
                    this.postForm.trainingCategory = res.data.trainingCategory;
                    this.postForm.enrolSeason = res.data.enrolSeason;
                    this.postForm.startTime = res.data.startTime;
                    this.postForm.endTime = res.data.endTime;
                    this.postForm.jwyStartTime = res.data.jwyStartTime;
                    this.postForm.jwyEndTime = res.data.jwyEndTime;
                }
            });
        },
        deleteRow(id) {
            this.$confirm(
                this.$t("message.deleteConfirm"),
                this.$t("message.prompt"),
                {
                    confirmButtonText: this.$t("message.confirm"),
                    cancelButtonText: this.$t("message.cancel"),
                    type: "warning"
                }
            ).then(() => {
                deleteRegistConfig(id).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: this.$t("message.deleteSuccess")
                        });
                        this.onSubmit();
                    }
                });
            });
        },
        //关闭回调
        handleClose() {
            if (this.editId) {
                this.resetPostForm();
            } else {
                if (this.hasChanged()) {
                    this.$refs.registerRoleDialog.open();
                    this.$refs.tipDialog.open();
                }
            }
        },
        returnDialog() {
            if (this.editId) {
                this.$refs.registerRoleDialog.close();
            } else {
                if (this.hasChanged()) {
                    this.$refs.tipDialog.open();
                } else {
                    this.$refs.registerRoleDialog.close();
                }
            }
        },
        resetPostForm() {
            this.postForm.calendarId = this.currentCalendarId;
            this.postForm.currentGrade = null;
            this.postForm.trainingCategory = null;
            this.postForm.enrolSeason = null;
            this.postForm.trainingLevels = [];
            this.postForm.startTime = null;
            this.postForm.endTime = null;
            this.postForm.jwyStartTime = null;
            this.postForm.jwyEndTime = null;
        },
        hasChanged() {
            return (
                this.postForm.currentGrade ||
                this.postForm.startTime ||
                this.postForm.endTime ||
                this.postForm.trainingCategory ||
                this.postForm.trainingLevels.length > 0 ||
                this.postForm.calendarId != this.currentCalendarId ||
                this.postForm.enrolSeason ||
                this.postForm.jwyStartTime ||
                this.postForm.jwyEndTime
            );
        },
        saveDialog() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let fn = res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: this.$t("message.saveSuccess")
                            });
                            this.resetPostForm();
                            this.$refs.registerRoleDialog.close();
                            this.onSubmit();
                        }
                    };
                    let postForm = _.cloneDeep(this.postForm);
                    postForm.trainingLevel = postForm.trainingLevels.join(",");
                    postForm.trainingLevels = null;
                    if (this.editId) {
                        postForm.id = this.editId;
                        updateRegistConfig(postForm).then(fn);
                    } else {
                        addRegistConfig(postForm).then(fn);
                    }
                }
            });
        },
        getDateFormat(val) {
            return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : null;
        },
        done() {
            this.currentCalendarId = this.queryForm.calendarId;
            this.onSubmit();
        },
        cancelTipDialog() {
            this.$refs.tipDialog.close();
        },
        saveTipDialog() {
            this.$refs.tipDialog.close();
            this.saveDialog();
        },
        confirmTipDialog() {
            this.$refs.tipDialog.close();
            this.resetPostForm();
            this.$refs.registerRoleDialog.close();
        }
    }
};
</script>
<style lang="scss" scoped>
#tip-dialog {
    ::v-deep .el-dialog__header {
        padding: 15px;
    }
    ::v-deep .el-icon-info {
        font-size: 25px;
        color: #e6a23c;
        position: absolute;
        margin-left: -35px;
        margin-top: -6px;
    }
    .edu-dialog_body div {
        margin-left: 40px;
    }
}
</style>